<template>
    <div class="Account">
      <div class="Account-title">
        账号设置
      </div>
      <div class="Account-info">
        <div class="Account-info-password">
          <div style="width: 100px;">密码</div>
          <div class="Account-info-confirm">
              <router-link :to="{name:'修改密码'}">修改密码</router-link>
              <p style="margin-right: 40px;font-size: medium">存在风险,  请设置密码</p>
          </div>
      </div>
        <div class="Account-info-phone">
          <div style="width: 100px;">手机</div>
          <div class="Account-info-confirm">
            <a href="javascript:;">修改手机</a>
            <p style="margin-right: 40px;font-size: medium"></p>
          </div>
        </div>
        <div class="Account-info-email">
          <div style="width: 100px;">邮箱</div>
          <div class="Account-info-confirm">
            <a href="javascript:;">绑定邮箱</a>
            <p style="margin-right: 40px;font-size: medium"></p>
          </div>
        </div>
        <div class="Account-info-logout">
          <div style="width: 100px;">账号注销</div>
          <div class="Account-info-confirm">
            <a href="javascript:;">立即注销</a>
          </div>
        </div>

    </div>
</div>


</template>

<script>
export default {
     name:"Account",
     data(){
       return{
          user:{
            password:"",
            phone:"",
            email:""
          }
       }
     }
}
</script>

<style>
div{
  box-sizing: border-box;
}
.Account{
  margin-top: 40px;
  width: 1200px;

}
.Account-title{
  font-size: 18px;
  font-weight: bold;
  height: 48px;
  line-height: 48px;
}
.Account-info{
  width: 100%;
  height: 100%;
  padding: 16px 58px 16px 15px;
  display: flex;
  flex-direction: column;
}
.Account-info > div{
  height: fit-content;
  display: flex;
  align-content: center;
  font-size: small;
  margin-top: 20px;
}
.Account-info > div >div{
  line-height: 50px;
}

.Account-info .el-input__inner{
  width: 150px;
  margin-left: 10px;
  border:none ;
}
.Account-info .el-input{
  width: 200px;
}

.Account-info-confirm{
  display: flex;
   /*margin-left: 600px;*/
  padding-top: 5px;
   flex-grow:1;
  flex-direction: row-reverse;
  padding-right: 200px;

}
.Account-info-confirm a{
text-decoration: none;
  color : #409eff;

}

</style>